<template>
    <div>
        <div class="col-lg-12 control-section">
            <div class="sample_container badge-types">
                <div class="badge-block">
                    <div class="e-card e-badge-showcase">
                        <div class="e-card-content">
                            <div class="badge-block-first">
                                <button class="e-btn">Primary</button>
                                <!-- Primary Colored Notification Badge -->
                                <span class="e-badge e-badge-primary e-badge-notification e-badge-overlap">10</span>
                            </div>
                        </div>
                        <div class="e-card-content text">
                            <div>
                                <code>.e-badge-primary</code>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="badge-block">
                    <div class="e-card e-badge-showcase">
                        <div class="e-card-content">
                            <button class="e-btn">Secondary
                                <!-- Secondary Colored Notification Badge -->
                                <span class="e-badge e-badge-secondary e-badge-notification e-badge-overlap">20</span>
                            </button>
                        </div>
                        <div class="e-card-content text">
                            <code>.e-badge-secondary</code>
                        </div>
                    </div>
                </div>

                <div class="badge-block">
                    <div class="e-card e-badge-showcase">
                        <div class="e-card-content">
                            <button class="e-btn">Success
                                <!-- Success Colored Notification Badge -->
                                <span class="e-badge e-badge-success e-badge-notification e-badge-overlap">25</span>
                            </button>
                        </div>
                        <div class="e-card-content text">
                            <code>.e-badge-success</code>
                        </div>
                    </div>
                </div>

                <div class="badge-block">
                    <div class="e-card e-badge-showcase">
                        <div class="e-card-content">
                            <button class="e-btn">Danger
                                <!-- Danger Colored Notification Badge -->
                                <span class="e-badge e-badge-danger e-badge-notification e-badge-overlap">30</span>
                            </button>
                        </div>
                        <div class="e-card-content text">
                            <code>.e-badge-danger</code>
                        </div>
                    </div>
                </div>

                <div class="badge-block">
                    <div class="e-card e-badge-showcase">
                        <div class="e-card-content">
                            <button class="e-btn">Warning
                                <!-- Warning Colored Notification Badge -->
                                <span class="e-badge e-badge-warning e-badge-notification e-badge-overlap">40</span>
                            </button>
                        </div>
                        <div class="e-card-content text">
                            <code>.e-badge-warning</code>
                        </div>
                    </div>
                </div>

                <div class="badge-block">
                    <div class="e-card e-badge-showcase">
                        <div class="e-card-content">
                            <button class="e-btn">Info
                                <!-- Info Colored Notification Badge -->
                                <span class="e-badge e-badge-info e-badge-notification e-badge-overlap">45</span>
                            </button>
                        </div>
                        <div class="e-card-content text">
                            <code>.e-badge-info</code>
                        </div>
                    </div>
                </div>

                <div class="badge-block">
                    <div class="e-card e-badge-showcase">
                        <div class="e-card-content">
                            <button class="e-btn e-info">Light
                                <!-- Light Colored Notification Badge -->
                                <span class="e-badge e-badge-light e-badge-notification e-badge-overlap">50</span>
                            </button>
                        </div>
                        <div class="e-card-content text">
                            <code>.e-badge-light</code>
                        </div>
                    </div>
                </div>

                <div class="badge-block">
                    <div class="e-card e-badge-showcase">
                        <div class="e-card-content">
                            <button class="e-btn e-info">Dark
                                <!-- Dark Colored Notification Badge -->
                                <span class="e-badge e-badge-dark e-badge-notification e-badge-overlap">75</span>
                            </button>
                        </div>
                        <div class="e-card-content text">
                            <code>.e-badge-dark</code>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="action-description">
            <p>This sample demonstrates 8-predefined badge colors for various scenarios which can be applied from the modifier class.</p>
        </div>

        <div id="description">
            <p>The badge supports the following 8 different essential colors for various situations. All the classes should be added
                with
                <code>.e-badge</code> class.
            </p>
            <ul>
                <li>Primary: The
                    <code>.e-badge-primary</code> class applies the primary color.</li>
                <li>Secondary: The
                    <code>.e-badge-secondary</code> class applies the secondary color.</li>
                <li>Success: The
                    <code>.e-badge-success</code> class applies the success color.</li>
                <li>Danger: The
                    <code>.e-badge-danger</code> class applies the danger color.</li>
                <li>Warning: The
                    <code>.e-badge-warning</code> class applies the warning color.</li>
                <li>Info: The
                    <code>.e-badge-info</code> class applies the info color.</li>
                <li>Light: The
                    <code>.e-badge-light</code> class applies the light color.</li>
                <li>Dark: The
                    <code>.e-badge-dark</code> class applies the dark color.</li>
            </ul>
        </div>
    </div>
</template>

<style>
    .fabric .sample_container.badge-types .e-badge-showcase.e-card {
        background: transparent;
    }

    .e-bigger .sample_container.badge-types .e-btn {
        padding: 0px 10px 2px 10px;
    }

    @media only screen and (max-width: 365px) {
        .sample_container.badge-types {
            max-width: 146px;
        }
    }

    .highcontrast .sample_container.badge-types .e-btn:focus {
        outline: 0px;
        color: white;
    }

    .control-section {
        overflow: auto;
        padding-top: 40px;
    }

    .badge-types .e-btn {
        position: relative;
    }

    /* Media queries for Multiple devices */

    @media only screen and (max-width: 890px) {
        .sample_container.badge-types {
            max-width: 311px;
            margin: auto;
            margin-top: 0px;
        }
        .badge-types .e-card-content.text {
            font-size: 10px;
        }
        .badge-types .e-badge-showcase.e-card {
            width: 135px;
        }
    }

    @media only screen and (min-width: 890px) {
        .sample_container.badge-types {
            max-width: 745px;
            margin: auto;
            margin-top: 24px;
        }
        .badge-types .e-badge-showcase.e-card {
            width: 160px;
        }
    }

    .badge-types .e-btn {
        text-transform: none;
    }

    .sample_container.badge-types .badge-block {
        margin: 2px 2px 2px 2px;
        vertical-align: top;
        display: inline-block;
    }

    .highcontrast .sample_container.badge-types code {
        border: 0;
    }

    .sample_container.badge-types .badge-block-first {
        position: relative;
    }

    /* Card Customization */

    .badge-types .e-badge-showcase.e-card {
        height: 100px;
        padding: 5px;
        margin: 5px 3px;
        box-shadow: none;
        border-radius: 8px;
        border: 1px solid #f1f1f1;
        background-color: #f1f1f1;
    }

    .highcontrast .badge-types .e-badge-showcase.e-card {
        background-color: #000;
    }

    .badge-types .e-badge-showcase.e-card .e-card-header .e-card-header-title {
        align-self: center;
        font-size: 18px;
        letter-spacing: 1px;
        text-shadow: #eaeaea 1px 1px 2px;
    }

    .badge-types .e-badge-showcase.e-card .e-card-header .e-card-sub-title {
        color: rgba(0, 0, 0, 0.75);
        white-space: pre-line;
        font-size: 14px;
        text-shadow: #eaeaea 1px 1px 2px
    }

    .badge-types .e-badge-showcase.e-card .e-card-header .e-card-sub-title p {
        margin: 0;
    }

    .badge-types .e-badge-showcase.e-card .e-card-content {
        overflow: visible;
        align-self: center;
        padding: 0 0 10px 0;
        overflow: initial;
    }
</style>